<template>
    <div class="swiper-container film-swiper">
        <div class="swiper-wrapper">
            <slot></slot>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
</template>

<script>
import Vue from 'vue';
// import Swiper from 'swiper'; // 直接引入swiper有问题，默认入口是swiper.cjs.js不兼容
import Swiper from 'swiper/swiper-bundle.min.js';
import 'swiper/swiper-bundle.min.css';

export default {
    mounted() {
        const mySwiper = new Swiper('.film-swiper', {
            // direction: 'vertical', // 垂直切换选项
            autoplay: true, // 设置自动循环播放
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination'
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            },
            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar'
            }
        });
        Vue.use(mySwiper); // 解决ES6no-new问题
    }
};
</script>

<style lang="scss" scoped>
.swiper-container {
    width: 100%;
    height: 150px;
}

.swiper-pagination {
    text-align: right;
}
</style>
